<template>
	<view class="ms-Item overturn pt-8">
		<!-- 系统类消息 -->
		<template v-if="msgObj['cctime']">
			<view class="sys-msg pb-4">
				<!-- <text>{{timeFormat(msgObj['cctime'],"hh:MM")}}</text> -->
				<!-- <text>{{timeFormat(msgObj['cctime'],"yyyy-mm-dd hh:MM")}}</text> -->
				<text>{{timeFormat2(msgObj['cctime'])}}</text>
			</view>
		</template>
		<!-- 非自己的消息 -->
		<template v-if="msg['fromuid']&&msg['fromuid'] != userid">
			<view class="flex-between ai-flex-start jc-flex-start">
				<m-image2 types="user" :src="msg['fromheadpic']" size="72" radius="200"></m-image2>
				<view class="pl-16 flex-1 flex flex-column ai-flex-start">
					<view class="mb-8">
						<text class="fs24 text-dark">{{msg['fromnickname']}}</text>
					</view>
					<view class="msg_right flex-column ai-baseline">
						<view v-if="loadings">
							<text class="fs24">加载中...</text>
						</view>
						<template v-else>
							<!-- 文本 -->
							<!-- @longpress="copyText(msgObj['content'] || msgObj)" -->
							<view class="textCont" v-if="msgObj['type']==1||msg['msgtype']==1" @longpress="longpress">
								<text>
									{{msgObj['content'] || msgObj}}
								</text>
							</view>
							<!-- 图片 -->
							<m-image2 v-if="msgObj['type']==2 ||msg['msgtype']==2" :src="msgObj['content']"
								:isPreview="true" :size="[120]" mode="widthFix" />
							<!-- 商品 -->
							<view v-if="msgObj['type']==3 ||msg['msgtype']==3" class="infoCont flex"
								@click="Jump('/pages/home/goodsDetail/goodsDetail?id=' + msgObj['content']['id'])">
								<m-image2 :src="msgObj['content'].picurl" radius="12" :size="[130,130]" />
								<view class="flex-column ml-16 jc-space-between flex-1">
									<view class="">
										<text class="otp2 flex-1 fs24"
											style="width: 300rpx;">{{msgObj['content']['goodsname']}}</text>
										<view class="text-grey fs21 mb-8 mt-4">
											<text
												v-if="msgObj['content'].attr&&msgObj['content'].attr.goodsname">{{msgObj['content'].attr.goodsname}}</text>
											<text v-else>默认规格</text>
										</view>
									</view>
									<view class="flex-between pr-16">
										<view class="flex">
											<m-price  :size="[30,16]" :value="msgObj['content']['price']" color="#333" />
										</view>
										<text class="fs21 text-grey detail">详情</text>
									</view>
								</view>
							</view>
							<!-- 引用 -->
							<view class=" fs21 flex inMsgBox ai-baseline"
								v-if="msgObj['inMsgId']&&allMes[msgObj['inMsgId']]">
								<text class="ws-nowrap">{{allMes[msgObj['inMsgId']]['tonickname']}}：</text>
								<view class=" flex-1 otp2">
									<text
										v-if="JSON.parse(allMes[msgObj['inMsgId']]['sencmsgcontent']).type==1">{{JSON.parse(allMes[msgObj['inMsgId']]['sencmsgcontent']).content }}</text>
									<text v-else>引用内容不存在</text>
								</view>
							</view>
						</template>
					</view>
				</view>
			</view>
		</template>
		<!-- 自己的消息 -->
		<template v-else>
			<view class="flex-between ai-flex-start jc-flex-end">
				<view class="pr-16 flex-1 flex flex-column ai-flex-end">
					<view class="mb-8">
						<text class="fs24 text-grey"
							v-if="msg['fromnickname']">{{msg['fromnickname'] | nikeName}}</text>
					</view>
					<view class="msg_left flex-column ai-flex-end">
						<view v-if="loadings">
							<text class="fs24">加载中...</text>
						</view>
						<template v-else>
							<!-- 文本 -->
							<!-- @longpress="copyText(msgObj['content'] || msgObj)" -->
							<view class="textCont" v-if="msgObj['type']==1 || msg['msgtype']==1" @longpress="longpress">
								<text style="">{{msgObj['content'] || msgObj}}</text>
							</view>
							<!-- 图片 -->
							<m-image2 v-if="msgObj['type']==2 ||msg['msgtype']==2" :src="msgObj['content']"
								:isPreview="true" :size="[120]" mode="widthFix" />
							<!-- 商品详情 -->
							<view class="infoCont flex" v-if="msgObj['type']==3 ||msg['msgtype']==3"
								@click="Jump('/pages/home/goodsDetail/goodsDetail?id=' + msgObj['content']['id'])">
								<m-image2 :src="msgObj['content'].picurl" radius="12" :size="[130,130]" />
								<view class="flex-column ml-16 jc-space-between flex-1">
									<view class="">
										<text class="otp2 flex-1 fs25"
											style="width: 300rpx;">{{msgObj['content']['goodsname']}}</text>
										<view class="text-grey fs21 mb-8 mt-4">
											<text
												v-if="msgObj['content'].attr&&msgObj['content'].attr.goodsname">{{msgObj['content'].attr.goodsname}}</text>
											<text v-else>默认规格</text>
										</view>
									</view>
									<view class="flex-between pr-16">
										<view class="flex">
											<m-price :size="[30,16]" :value="msgObj['content']['price']" color="#333" />
										</view>
										<text class="fs21 text-grey detail">详情</text>
									</view>
								</view>
							</view>
							<!-- 引用 -->
							<view class=" fs21 flex inMsgBox ai-baseline"
								v-if="msgObj['inMsgId']&&allMes[msgObj['inMsgId']]">
								<text class="ws-nowrap">{{allMes[msgObj['inMsgId']]['tonickname']}}：</text>
								<view class=" flex-1 otp2">
									<text
										v-if="JSON.parse(allMes[msgObj['inMsgId']]['sencmsgcontent']).type==1">{{JSON.parse(allMes[msgObj['inMsgId']]['sencmsgcontent']).content }}</text>
									<text v-else>引用内容不存在</text>
								</view>
							</view>
						</template>
					</view>
				</view>
				<!-- 头像 -->
				<m-image2 types="user" :src="msg['fromheadpic']" size="72" radius="200"></m-image2>
			</view>
		</template>

	</view>
</template>

<script>
	import { mapState, mapMutations } from 'vuex'
	export default {
		name: "msgItem",
		data() {
			return {
				windowHeight: 0,
				msg2: '',
			};
		},
		props: {
			item: {
				type: [Object, String],
				default: () => {}
			},
		},
		computed: {
			...mapState({
				topNavHeight: state => state.general.topNavHeight,
				userinfo: state => state.user.userinfo,
				allMes: state => state.chat.allMes,
				loadingIDArr: state => state.chat.loadingIDArr,
			}),
			msg() {
				return this.item
				// return this.allMes[this.item['id']]
			},
			// 格式化数据内容
			msgObj() {
				console.log('item0000000000?', this.item)
				let sencmsgcontent = JSON.parse(this.item['sencmsgcontent']);
				const lastMsgTime = this.Cookie.get('lastMsgTime') || 0;
				if (sencmsgcontent['cctime'] && lastMsgTime < sencmsgcontent['cctime']) {
					this.Cookie.set('lastMsgTime', sencmsgcontent['cctime'])
				}
				return sencmsgcontent;
			},
			loadings() {
				return this.loadingIDArr.indexOf(this.item['id']) != -1 ? true : false
				// return this.allMes[this.item['id']]['isLoading'] || false;
			},
			userid() {
				return this.userinfo.userid
			},
		},
		watch: {
			loadings(v) {
				this.msg2 = this.allMes[this.item['id']]
				console.log('v===>', v)
			}
		},
		async mounted() {},
		methods: {
			longpress(e) {
				console.log('长按触发', e)
				this.$emit('longpressIn', e)
			},
			// 长按复制内容
			copyText(content) {
				uni.setClipboardData({
					data: content,
					success: function() {
						uni.showToast({
							title: '复制成功'
						})
					}
				})
			}
		},
	}
</script>

<style lang="scss">
	.ms-Item {
		padding: 0 24rpx;
		-moz-transform: scaleY(-1);
		-webkit-transform: scaleY(-1);
		-o-transform: scaleY(-1);
		transform: scaleY(-1);

		.sys-msg {
			text-align: center;

			text {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(153, 153, 153, .8);
			}
		}
	}

	.msg_right {
		width: 100%;
		display: inline-flex;

		.textCont {
			overflow: hidden;
			word-wrap: break-word;
			border-radius: 0px 10px 10px 10px;
			background: #fff;
			padding: 12rpx 20rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			color: #000;
			// max-width: 35%;
			max-width: 450rpx;
		}

		.infoCont {
			border-radius: 0px 10px 10px 10px;
			background: #fff;
			padding: 18rpx 16rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			color: #333;
			box-sizing: border-box;
			width: 85%;
		}
	}

	.msg_left {
		// max-width: 45%;
		width: 100%;
		display: inline-flex;

		.textCont {
			overflow: hidden;
			word-wrap: break-word;
			border-radius: 10px 0px 10px 10px;
			background: #9dff91;
			padding: 12rpx 20rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			color: #000;
			// max-width: 35%;
			max-width: 450rpx;
		}

		.infoCont {
			border-radius: 10px 0px 10px 10px;
			background: #fff;
			padding: 18rpx 16rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			color: #333;
			box-sizing: border-box;
			width: 85%;
		}
	}

	.detail {
		// border:2rpx solid #999;
		// border-radius: 50rpx;
		// padding: 8rpx 12rpx;
	}

	.inMsgBox {
		max-width: 60%;
		margin-top: 6rpx;
		background-color: #e9e9e9;
		padding: 8rpx 12rpx;
		color: #777;
		border-radius: 8rpx;
	}
</style>